import { CapsuleTabs, NavBar } from 'antd-mobile'
import React from 'react'
import {
  Form,
  Input,
  Button, 
} from 'antd-mobile'
import { Calendar, Cell } from 'react-vant'
function index() {
  return (
    <div>
      <NavBar>订票</NavBar>
      <CapsuleTabs>
        <CapsuleTabs.Tab title='火车票' key='fruits'>
          <Form
            layout='horizontal'
            footer={
              <Button block type='submit' color='primary' size='large'>
                提交
              </Button>
            }
          > 
            <Form.Item
              name='start'
              label='出发点' 
            >
              <Input onChange={console.log} placeholder='请输入出发点' />
            </Form.Item> 
            <Form.Item
              name='end'
              label='目的地' 
            >
              <Input onChange={console.log} placeholder='请输入目的地' />
            </Form.Item>
            <Form.Item>
               <Calendar>
        {(val , actions) => (
          <Cell
            isLink
            title='单个日期'
            value={val ? val.toLocaleDateString() : '请选择日期'}
            onClick={() => actions.open()}
          />
        )}
      </Calendar>
            </Form.Item>
            </Form>
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title='飞机票' key='vegetables'>
          飞机票
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title='船票' key='animals'>
          船票
        </CapsuleTabs.Tab>
      </CapsuleTabs>
    </div>
  )
}

export default index